<template>
  <div class="container">
    <h1>
      绿色出行与影响因素
    </h1>
    <div class="table-container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="得分挡位" ></el-table-column>
        <el-table-column prop="age" label="第一影响因素" ></el-table-column>
        <el-table-column prop="address" label="第二影响因素"></el-table-column>
        <el-table-column prop="phone" label="第三影响因素" ></el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script setup>
import { ref } from "vue";

// 表格数据
const tableData = ref([
  { name: "15+", age: '8、您的年龄范围是？', address: "6、(科技创新应用 如推出智能出行APP、智能导航系统等)", phone: "5、您是否了解过政府或社会组织（如学校、单位等）推广绿色出行的政策或活动？\n" },
  { name: "10-15", age: '5、您是否了解过政府或社会组织（如学校、单位等）推广绿色出行的政策或活动？\n', address: "1、(看交通工具的方便性)\n", phone: "2、(出行舒适度 如天气条件、座椅舒适度等)\n" },
  { name: "7-10", age: '1、(听人推荐)\n', address: "4、(享受大自然)\n", phone: "2、(出行舒适度 如天气条件、座椅舒适度等)\n" },
  { name: "7-", age: '8、您的年龄范围是？\n', address: "2、(社交影响 如朋友、家人或同事的推荐)\n", phone: "6、(环保宣传教育 如公益广告、社区宣讲会等)\n" },
]);
</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.table-container {
  padding: 20px;
  width: 70%;
}
</style>
